<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>颜色</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            width: 200px;
            height: 200px;
            border:1px solid #ccc;
            /* 1 使用预设值 */
            /* background-color: lightblue; */
            /* 2 使用 16 进制表示 00 - FF 的值
                        红 绿 蓝
                最小值： 000000 黑色
                最大值： ffffff 白色
            */
            /* background-color: #ff0000; */
            /* 3 rgb 0 - 255 表示
                rgb(红,绿,蓝)
             */
            /* background-color: rgb(255, 123, 123); */
            /* 4 hsl(颜色（0-360）, 饱和度（0%-100%）, 透明度（0%-100%，默认是 50%）) */
            /* background-color: hsl(30, 100%, 50%); */

            /* h5 中的颜色设置 */
            /* rgba(红色,绿色,蓝色,透明度) 
                透明度 0 代表完全透明 1 代表完全不透明
            */
            background-color: rgba(255, 0, 255, 0.2);
        }
    </style>
</head>
<body>
    <div>这是内容</div>
</body>
</html>